/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable @typescript-eslint/no-shadow */
import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import DragTable from '@/components/DragTable';
import { Popconfirm, Button, message } from 'antd';
import ProTable from '@ant-design/pro-table';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import { getCashBackList, cashBackChangeStatus } from '@/services/operatorManagement';
import OperateModal from '@/components/_pages/OperatorManagement/CashBack/OperateModal';
import type { TableListItem } from './types/CashBack';
import styles from './index.less';

const CashBack: React.FC = () => {
  const tableRef = useRef<ActionType>();
  const [open, setOpen] = useState(false);
  const [type, setType] = useState('');

  const requestList = (params: any) => {
    const { current: page, ...rest } = params;
    return getCashBackList({
      page,
      ...rest,
    });
  };

  const onBtnClick = (type: string) => {
    setOpen(true);
    setType(type);
  };

  const onConfirm = async (status: string, id: string) => {
    try {
      const { code, msg } = await cashBackChangeStatus({ status, id });
      if (code == 0) {
        tableRef.current?.reload();
        return Promise.resolve();
      } else {
        message.error(msg);
        return Promise.resolve();
      }
    } catch (error) {
      return Promise.resolve();
    }
  };

  const columns: ProColumns<TableListItem>[] = [
    {
      key: 'keyword',
      hideInTable: true,
      valueType: 'text',
      fieldProps: {
        placeholder: '驿站id/账号/名称',
      },
    },
    {
      title: '驿站id',
      dataIndex: 'cm_id',
      search: false,
      width: 100,
      align: 'center',
    },
    {
      title: '驿站名称',
      dataIndex: 'inn_name',
      search: false,
      width: 120,
      align: 'center',
    },
    {
      title: '驿站账号',
      dataIndex: 'phone',
      search: false,
      width: 150,
      align: 'center',
    },
    {
      title: '联系电话',
      dataIndex: 'concat_phone',
      search: false,
      width: 150,
      align: 'center',
    },
    {
      title: '加入时间',
      dataIndex: 'join_date',
      search: false,
      width: 150,
      align: 'center',
    },
    {
      title: '总金额',
      dataIndex: 'total_amount',
      search: false,
      width: 150,
      align: 'center',
    },
    {
      title: '已返现金额',
      dataIndex: 'already_cashback',
      search: false,
      width: 150,
      align: 'center',
    },
    {
      title: '上月短信用量',
      dataIndex: 'last_month_usage',
      search: false,
      width: 150,
      align: 'center',
    },
    {
      title: '本月应返',
      dataIndex: 'this_month_cashback',
      search: false,
      width: 150,
      align: 'center',
    },
    {
      title: '本月短信用量',
      dataIndex: 'this_month_usage',
      search: false,
      width: 150,
      align: 'center',
    },
    {
      title: '下月应返',
      dataIndex: 'next_month_cashback',
      search: false,
      width: 150,
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'status',
      search: false,
      width: 100,
      align: 'center',
      renderText: (text) => {
        return text == 0 ? '已开启' : '已禁用';
      },
    },
    {
      title: '操作',
      search: false,
      dataIndex: 'status',
      width: 100,
      align: 'center',
      renderText: (text, record) => {
        const content = text == 1 ? '开启' : '禁用';
        const status = text == 1 ? '0' : '1';
        return (
          <Popconfirm
            title={`确认${content}此驿站？`}
            onConfirm={onConfirm.bind(null, status, record.id)}
          >
            <a>{content}</a>
          </Popconfirm>
        );
      },
    },
  ];

  return (
    <PageContainer>
      <div className={styles.cashBack}>
        <DragTable>
          <ProTable
            actionRef={tableRef}
            columns={columns}
            request={requestList}
            toolBarRender={false}
            pagination={{
              showSizeChanger: false,
              pageSize: 20,
            }}
            search={{
              defaultCollapsed: false,
              optionRender: (searchConfig, formProps, dom) => [
                dom[1],
                <Button type='primary' key='add' onClick={onBtnClick.bind(null, 'add')}>
                  新增
                </Button>,
                <Button type='primary' key='export' onClick={onBtnClick.bind(null, 'export')}>
                  导出
                </Button>,
                <Button type='primary' key='dispatch' onClick={onBtnClick.bind(null, 'dispatch')}>
                  发放
                </Button>,
              ],
            }}
            scroll={{ x: 900 }}
            rowKey='id'
          />
        </DragTable>
        <OperateModal
          open={open}
          type={type}
          onClose={() => {
            setOpen(false);
          }}
          refresh={tableRef.current?.reload}
        />
      </div>
    </PageContainer>
  );
};

export default CashBack;
